import React from 'react';
import ReactEcharts from 'echarts-for-react';

class Info extends React.Component {
    render() {
        const
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} {b}: {c} ({d}%)"
                },
                backgroundColor: 'rgba(255, 255, 255, 0)',
                color: ['#da1111', '#108ee9', '#ec3232', '#f55555', '#fb8c8c', '#7cc7ff'],
                legend: {
                    orient: 'horizontal',
                    x: '4%',
                    y: 'bottom',
                    data: [ '已完成','待完成']
                },
                series: [
                    {
                        name: '近期项目任务占比',
                        type: 'pie',
                        center: ['47%', '45%'],
                        selectedMode: 'single',
                        radius: [0, '45%'],
                        label: {
                            normal: {
                                position: 'inner',
                                fontSize: '14',
                                fontWeight: 'bold'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '15',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            {value: 15, name: '待完成'},
                            {value: 35, name: '已完成'},
                        ]
                    },
                    {
                        name: '访问来源',
                        type: 'pie',
                        center: ['47%', '45%'],
                        radius: ['55%', '65%'],
                        data: [
                            {value: 5, name: '进行中'},
                            {value: 5, name: '未开始'},
                            {value: 5, name: '滞后'},
                            {value: 35, name: '完成'},
                        ]
                    }
                ]
            };
        return (
            <div className='info bg-style'>
                <div className='main-title'>近期我的项目任务统计概览（55）</div>
                <div className='main-date'>未结束的项目任务</div>
                <ReactEcharts
                    option={option}
                    style={{padding: '10px',height: 'calc(100% - 70px)' , width: '100%'}}
                />
            </div>
        )
    }
}
export default Info;